<template>
  <div class="score-container">
    <el-card>
      <el-form :inline="true" @submit.prevent="handleQuery">
        <el-form-item label="考生姓名">
          <el-input v-model="queryParams.studentName" placeholder="请输入姓名"/>
        </el-form-item>
        <el-form-item label="所属地区">
          <el-select v-model="queryParams.region" placeholder="请选择地区">
            <el-option label="北京" value="北京"/>
            <el-option label="上海" value="上海"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        v-loading="loading"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
        :responsive="true">
        <el-table-column prop="studentName" label="姓名" width="120"/>
        <el-table-column prop="region" label="地区" width="120"/>
        <el-table-column prop="employeeId" label="员工编号"/>
        <el-table-column prop="email" label="邮箱" width="200"/>
        <el-table-column label="科目成绩">
          <template #default="{ row }">
            <el-tag
              v-for="(subject, index) in row.subjects"
              :key="index"
              style="margin-right: 5px">
              {{ subject }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="总分" width="100"/>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNumber"
        :page-sizes="[10, 20, 30]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        style="margin-top: 20px"/>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      queryParams: {
        studentName: '',
        region: ''
      },
      tableData: [],
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const response = await this.$axios.post('/scoreQuery', {
          ...this.queryParams,
          pageNumber: this.pagination.pageNumber,
          pageSize: this.pagination.pageSize
        })
        
        this.tableData = [response.data]
        this.pagination = {
          pageNumber: response.data.page.pageNumber,
          pageSize: response.data.page.pageSize,
          total: response.data.page.total
        }
      } catch (error) {
        this.$message.error('数据加载失败')
      } finally {
        this.loading = false
      }
    },
    handleQuery() {
      this.pagination.pageNumber = 1
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNumber = val
      this.fetchData()
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
.score-container {
  padding: 20px;
}

@media (max-width: 768px) {
  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
  
  .el-select {
    width: 120px;
  }
}
</style>